<template>
  <div class="app">
    <!-- 使用Category组件，并且呈现游戏列表 -->
    <Category title="游戏">
      <a href="#" slot="s2">查看更多</a>
      <ul slot="s1">
        <li v-for="game in games" :key="game.id">{{ game.name }}</li>
      </ul>
    </Category>
    <!-- 使用Category组件，并且呈现美食图片 -->
    <Category title="美食">
      <img slot="s1" :src="food" alt="">
      <em slot="s2">现在领取优惠卷</em>
    </Category>
    <!-- 使用Category组件，并且呈现影视宣传片 -->
    <Category title="影视">
      <video slot="s1" :src="movie" controls></video>
      <strong slot="s2">新片上映</strong>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category.vue";

export default {
  name: "App",
  components: { Category },
  data() {
    return {
      games: [
        { id: "asdtrd1", name: "英雄联盟" },
        { id: "asdtrd2", name: "原神" },
        { id: "asdtrd3", name: "红色警戒" },
        { id: "asdtrd4", name: "斗罗大陆" },
      ],
      food: "http://49.232.112.44/images/food.jpg",
      movie: "http://49.232.112.44/video/movie.mp4",
    };
  },
};
</script>

<style>
.app {
  background-color: #ddd;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  display: flex;
  justify-content: space-evenly;
}
</style>